<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.title span {
				color: 333;
				line-height: 2;
			}

			.title span {
				/* background: #ff6799; */
				background: linear-gradient(to right, #ff55ff, #0055ff, #ff6799, #aa00ff) no-repeat right bottom;
				background-size: 0 3px;
				transition: background-size 1s linear;
			}

			.title span:hover {
				background-position-x: left;
				background-size: 100% 3px;
			}
		</style>
	</head>
	<body>
		<div class="title">
			<span>
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque nesciunt cum, at ducimus vel esse
				molestias, aliquam voluptatum debitis iusto officia accusantium tempora accusamus maxime voluptatibus
				blanditiis nemo fuga officiis.
			</span>
		</div>
	</body>
</html>